<template>
	<view class="contronal">
		<up-sticky zIndex="1" style="top: 0px;">
			<view class="myhead">
				<up-icon name="list" size="28" class="list" @click="show = true"></up-icon>
				<view class="search-box" @click="Navigator(NavigatorTo.AUDIO_SEARCH)">
					<up-icon name="search" size="25"></up-icon>
					<text>薛之谦</text>
				</view>
				<up-icon name="mic" size="26" class="mic"></up-icon>
			</view>
		</up-sticky>
		<up-popup :show="show" @close="show = !show" mode="left">
			<view style="font-size: 20px;font-weight: bold;display: flex;line-height: 400px;justify-content: center;">
				<text>暂未开发，敬请期待</text>
			</view>
		</up-popup>

		<view class="myboby">
			<!-- 菜单 -->
			<view class="menu">
				<view class="swiper">
					<uni-swiper-dot :info="swiper" :current="current" field="content" :dotsStyles="dotsStyles">
						<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval"
							:duration="duration" circular="true">
							<swiper-item v-for="(item ,index) in swiper" :key="index">
								<view class="swiper-item">
									<image :src="item"></image>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<view class="sort">
					<view class="icon" v-for="(item,index) in icons" :key="index">
						<view class="icon-bg" @click="Navigator(item.Navigator)">
							<image :src="item.src" class="icon-size"></image>
							<text class="icon-text">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 歌单 -->
			<view class="song-sheet" blurEffect="light">
				<!-- 头部 -->
				<view class="head">
					<text>推荐歌单</text>
					<view class="more">
						<text>更多</text>
						<up-icon name="arrow-right" size="10"></up-icon>
					</view>
				</view>
				<!-- 卡片 -->
				<view class="tools" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
					<view class="card" v-for="(item,index) in info" :key="index" @click="NavigatoeDateil(item)">
						<view class="play-value">
							<up-icon name="play-right-fill" size="15" color="#fff"></up-icon>
							<text>10{{index}}万</text>
						</view>
						<image :src="item.src"></image>
						<view class="describe">{{item.describe}}</view>
					</view>
				</view>
			</view>

			<view class="sell">
				<view class="head">
					<view class="s_one">
						<image src="../../static/audio-icons/Refresh.png" @click="sellData"></image>
						<text>热门曲目</text>
					</view>
					<view class="more" @click="addAudioList">
						<up-icon name="play-right-fill" size="10" color="#fff"></up-icon>
						<text>播放</text>
					</view>
				</view>
				<view class="lists">
					<swiper :current="sellIndex" @change="changeSell" :interval="interval" :duration="duration"
						style="height: 300px;width: 360px;overflow: auto;">
						<swiper-item v-for="(item ,index) in urlList" :key="index">
							<view class="sell_list">
								<view class="sell_item" v-for="(data,i) in item" :key="i">
									<image :src="data.src"></image>
									<view class="text">
										<text class="text_1">{{truncatedName(data.name)}}&nbsp;</text>
										<text class="text_2">-&nbsp;{{truncatedsingerName(data.singerName)}}</text>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view style="height: 500px;"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	export default {
		name: "my-audio-index",
		computed: {
			...mapState('audio', ['urls'])
		},
		created() {
			this.sellData();
		},
		data() {
			return {
				swiper:[
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg'
				],
				info: [{
						src: 'https://d.musicapp.migu.cn/data/oss/resource/00/2h/v6/pf.webp',
						describe: '邓紫棋歌曲合集'
					},
					{
						src: 'https://d.musicapp.migu.cn/data/oss/resource/00/2k/kf/9x.webp',
						describe: '林俊杰歌曲合集'
					},
					{
						src: 'https://img.zcool.cn/community/0191a85a65779ca8012113c7e92cb2.png@1280w_1l_2o_100sh.png',
						describe: '抖音热门歌曲合集'
					},
					{
						src: 'https://img.phb123.com/uploads/allimg/220809/810-220PZ920250-L.jpeg',
						describe: '快手2024热门歌曲推荐'
					},
					{
						src: 'https://img.51miz.com/preview/element/00/01/11/03/E-1110381-201D722E.jpg',
						describe: '古风经典歌曲'
					},
				],
				dotsStyles: {
					bottom: 35,
					selectedBackgroundColor: '#ffffff'
				},
				current: 0,
				autoplay: true, //轮播图自动播放
				interval: 3000,
				duration: 1000,
				icons: [{
						src: '../../static/audio-icons/Daily.png',
						name: '每日推荐',
						Navigator: '/subpkg/everyday_list/everyday_list',
					},
					{
						src: '../../static/audio-icons/privateFm.png',
						name: '私人FM'
					},
					{
						src: '../../static/audio-icons/song_sheet.png',
						name: '歌单'
					}, {
						src: '../../static/audio-icons/Ranking_list.png',
						name: '排行榜'
					}, {
						src: '../../static/audio-icons/book.png',
						name: '有声听书'
					}
				],
				show: false, //右侧弹窗开关
				startX: 0, // 触摸开始时的X坐标
				moveX: 0, // 触摸点移动的距离
				moveBx: 0,
				sell: '0deg', //刷新图标
				urlList: [],
				sellIndex: 0,
				NavigatorTo: {
					AUDIO_SEARCH: '/subpkg/audio_search/audio_search'
				}
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			changeSell(e) {
				this.sellIndex = e.detail.current
			},
			NavigatoeDateil(item) {
				uni.navigateTo({
					url: '/subpkg/song_sheet/song_sheet?item=' + JSON.stringify(item)
				})
			},
			sellData() {
				this.sell = '360deg'
				this.urlList = []
				setTimeout(() => {
					this.sell = '0deg'
					let arrlist = this.urls
					this.urlList = this.shuffleArray(arrlist.flat());
					this.sellIndex = 0
				}, 500);
			},
			truncatedName(val) {
				return val.length > 15 ? val.substring(0, 15) + '...' : val;
			},
			truncatedsingerName(val) {
				return val.length > 20 ? val.substring(0, 20) + '...' : val;
			},
			shuffleArray(array) {
				let m = array.length,
					t, i;
				// 从数组末端开始往前遍历
				while (m) {
					// 随机生成一个索引，范围从 0 到 m（包含）
					i = Math.floor(Math.random() * m--);
					// 交换 array[m] 和 array[i]
					t = array[m];
					array[m] = array[i];
					array[i] = t;
				}
				const twoDArray = []
				for (let i = 0; i < array.length; i += 3) {
					twoDArray.push(array.slice(i, i + 3));
				}
				return twoDArray;
			},
			addAudioList() {
				let arr = this.urlList.flat();
				uni.$emit('addAudioList', arr)
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX - this.moveX;
				this.dragging = true; // 开始拖动

			},
			touchMove(event) {
				if (this.dragging) {
					event.preventDefault(); // 防止滚动
					let moveX = event.touches[0].clientX - this.startX;
					this.moveX = moveX;
				}
			},
			touchEnd() {
				this.dragging = false; // 结束拖动
				let remainder = this.moveX % 100; // 获取小数部分
				let decimalPart = remainder - Math.floor(remainder); // 获取小数部分的数值

				this.moveX = this.moveX > 0 ? 0 : ((this.moveX < -400) ? -400 : this.moveX);

				if (decimalPart > 0.35) {
					this.moveX = Math.floor(this.moveX / 100) * 100;
				} else {
					this.moveX = Math.round(this.moveX / 100) * 100;
				}
			},
			Navigator(Navigator) {
				uni.navigateTo({
					url: Navigator
				})
			}
		},
		watch: {
			moveX(newVal) {
				this.moveBx = newVal + 'px'
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				console.log('结束刷新');
				uni.stopPullDownRefresh();
			}, 2000);
		}
	}
</script>

<style lang="scss">
	.contronal {
			height: 100vh;
			overflow: auto;
	
			.myhead {
				position: relative;
				height: 140rpx;
				background-color: rgba(205, 205, 205, 0.4);
				backdrop-filter: blur(20rpx);
				display: flex;
				justify-content: space-between;
				z-index: 1;
	
				.list {
					margin-top: 40rpx;
					display: flex;
					justify-content: center;
					width: 100rpx;
	
					&:active {
						transition: background-color 0.2s ease-in;
						border-radius: 30rpx;
						background-color: rgba(252, 252, 252, 0.5);
					}
				}
	
				.mic {
					margin-top: 40rpx;
					margin-right: 20rpx;
				}
	
				.search-box {
					position: absolute;
					width: 520rpx;
					height: 60rpx;
					border: 1rpx solid #000000;
					background: linear-gradient(90deg, rgba(97, 207, 255, 0.8) 0%, rgba(46, 241, 220, 0.8) 50%, rgba(247, 82, 207, 0.8) 100%);
					backdrop-filter: blur(40rpx);
					top: 60rpx;
					left: 120rpx;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
	
					&:active {
						transform: scale(0.98);
						transition: transform 0.1s;
					}
	
					&>text {
						font-size: 24rpx;
						display: flex;
						line-height: 60rpx;
					}
				}
			}
	
			.myboby {
				overflow: hidden;
	
				.menu {
					height: 440rpx;
					border-bottom: 1px solid powderblue;
	
					.swiper {
						height: 280rpx;
	
						image {
							width: 640rpx;
							height: 220rpx;
							margin: 20rpx 60rpx;
							border-radius: 20rpx;
						}
					}
	
					.sort {
						height: 214rpx;
						display: flex;
						justify-content: space-around;
	
						.icon {
							&:active {
								transform: scale(0.9);
								transition: transform 0.1s;
							}
	
							.icon-bg {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50rpx;
								background-color: rgba(248, 248, 197, 0.5);
								backdrop-filter: blur(5px);
	
								/* 垂直居中子元素 */
								.icon-size {
									display: flex;
									left: 20rpx;
									top: 20rpx;
									width: 60rpx;
									height: 60rpx;
									z-index: 2;
								}
	
								.icon-text {
									font-family: Papyrus;
									font-size: 24rpx;
									color: #57e5ec;
									display: flex;
									margin-top: 40rpx;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}
				}
	
				.song-sheet {
					height: 400rpx;
					background-color: rgba(204, 204, 204, 0.2);
					backdrop-filter: blur(5px);
					border-radius: 0 0 20rpx 20rpx;
	
					.head {
						display: flex;
						justify-content: space-between;
						height: 80rpx;
	
						&>text {
							font-weight: bold;
							color: #ff0004;
							margin: 20rpx;
						}
					}
	
					.tools {
						height: 200rpx;
						display: flex;
	
						.card {
							transform: translateX(v-bind(moveBx));
							transition: transform 0.3s;
							width: 180rpx;
							height: 200rpx;
							position: relative;
							padding-left: 300rpx;
	
							&>image {
								width: 240rpx;
								height: 240rpx;
								position: absolute;
								left: 8px;
								border-radius: 20rpx;
							}
	
							.describe {
								position: absolute;
								font-size: 28rpx;
								top: 250rpx;
								left: 40rpx;
								width: 200rpx;
								display: flex;
								justify-content: center;
								color: #fff;
							}
	
							.play-value {
								width: 120rpx;
								height: 30rpx;
								border-radius: 20rpx;
								position: absolute;
								top: 5px;
								right: 50rpx;
								z-index: 1;
								display: flex;
								justify-content: center;
								line-height: 30rpx;
	
								&>text {
									font-size: 28rpx;
									font-weight: bold;
									color: #ffffff;
									z-index: 2;
								}
							}
						}
					}
				}
	
				.more {
					border: 1px solid darkcyan;
					width: 80rpx;
					height: 30rpx;
					display: flex;
					justify-content: center;
					line-height: 34rpx;
					margin: 30rpx 20rpx;
					border-radius: 40rpx;
	
					&:active {
						background-color: #bababa;
						transition: background-color 0.1s;
					}
	
					&:nth-of-type(1) {
						margin-left: 6px;
						font-size: 20rpx;
						color: #fd2125;
					}
	
					&:nth-of-type(2) {
						font-size: 20rpx;
						color: #fd2125;
					}
				}
	
				.sell {
					height: 600rpx;
					background-color: rgba(204, 204, 204, 0.2);
					backdrop-filter: blur(5px);
					border-radius: 40rpx;
					margin-top: 60rpx;
	
					.head {
						display: flex;
						line-height: 40rpx;
						justify-content: space-between;
						height: 100rpx;
	
						image {
							margin-top: 20rpx;
							width: 40rpx;
							height: 40rpx;
							transform: rotate(v-bind(sell));
							transition: transform 0.5s;
						}
	
						.s_one {
							height: 80rpx;
							display: flex;
							justify-content: space-around;
							margin: 20rpx;
	
							&>text {
								font-weight: bold;
								color: #65ffd1;
								margin: 20rpx;
							}
						}
	
						.more {
							margin-top: 44rpx;
						}
					}
	
					.lists {
						.sell_list {
							width: 700rpx;
							height: 500rpx;
	
							image {
								width: 150rpx;
								height: 150rpx;
								border-radius: 20rpx;
								margin: 4px 20rpx;
							}
	
							.sell_item {
								display: flex;
	
								.text {
									display: flex;
									flex-direction: column;
									width: 500rpx;
									.text_1 {
										margin-top: 20rpx;
										color: #65ffd1;
										font-size: 35rpx;
										font-weight: bold;
									}
	
									.text_2 {
									    margin-top: 20rpx;									
										color: #dbdbdb;
										font-size: 28rpx;
									}
								}
							}
						}
					}
				}
			}
		}
</style>